﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
	</head>
	<style type="text/css">
		body {
			background-color: #3994EE;
			text-align: center;
		}
		
		.div1 {
			background-image: url(img/1.png);
			width: 118px;
			height: 60px;
			color: #F6F6F6;
			float: left;
		}
		
		.div1:hover {
			background-image: url(img/2.png);
		}
		
		.div1:active {
			background-image: url(img/3.png);
		}
		
		a {
			text-decoration: none;
		}
		
		.div2 {
			height: 1px;
		}
		
		.div3 {
			border: #0CF solid 2px;
			height: 600px;
			margin-top: 65px;
			background-color: #E7FEED;
		}
		
		.table tr {
			font-family: "幼圆";
			height: 35px;
			background-color: #e7ebff;
			color: #5A5A5A;
			line-height: 1;
			font-size: 18px;
		}
		
		.table tr:hover {
			text-decoration: none;
			line-height: 1;
			background-color: #F0FFF8;
			color: #F60;
			cursor: pointer;
		}
	</style>

	<body>
		<div id="QueryDepartmentStaff">
			<div class="div2">
				<table width="354" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="118">
							<a href="bmgl1.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 新建部门</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="bmgl2.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 查询部门</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="bmgl3.html">
								<div class="div1" style=" background-color:#F90">
									<h4 style="text-align:center; line-height:0"> 查询部门员工</h4>
								</div>
							</a>
						</td>
					</tr>
				</table>
			</div>
			<div class="div3">
				<form onsubmit="return false;">
					<hr /> 请输入要查询的部门名称：
					<select v-model="department" >
						<option value="全部查询">全部查询</option>

						<option value="销售部">销售部</option>

						<option value="市场部">市场部</option>

						<option value="创意部">创意部</option>

						<option value="人事部">人事部</option>

						<option value="管理部">管理部</option>

						<option value="部门测试">部门测试</option>

					</select>
					<input type="button" @click="QueryDepartmentStaff()" value="提交" />
					<hr />
				</form>
				<!-- 查询显示内容 -->
				<div align="center">
					<table class="table">
						<tr>
							<td>员工编号</td>
							<td>员工姓名</td>
							<td>员工性别</td>
							<td>员工部门</td>
							<td>员工岗位</td>
							<td>入职日期</td>
							<td>修改</td>
							<td>删除</td>
						</tr>

						<tr v-for="item in userList">
							<td v-text="item.id"></td>
							<td v-text="item.user_name"></td>
							<td v-text="item.gender"></td>
							<td v-text="item.department"></td>
							<td v-text="item.station"></td>
							<td v-text="item.in_job_time"></td>
							<td>
								<a href="ygxxxg.html">修改</a>
							</td>
							<td>
								<a href="#" @click="DeleteDepartmentStaff(item.id)">删除</a>
							</td>
						</tr>

					</table>
					
					共{{total}}条,当前是第{{pageNum}}页&nbsp;一共{{pages}}页
					<button @click="prePage()">上一页</button>
					<button @click="nextPage()">下一页</button>

					<h3 style="color:red;"></h3>
				</div>

			</div>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			axios.defaults.baseURL = "http://176.55.4.113"
			const QueryDepartment = new Vue({
				el: "#QueryDepartmentStaff",
				data: {
					userList: [],
					department: '全部查询',
					total: '',
					pages: '',
					pageNum: '',
					pageSize: ''
				},
				methods: {
					QueryDepartmentStaff() {
						axios.get("/department/queryUser?query_way="+this.department+"&pageNum="+this.pageNum+"&pageSize="+this.pageSize)
							.then(result => {
								this.userList = result.data.data.list
								this.total = result.data.data.total
								this.pages = result.data.data.pages
								this.pageNum = result.data.data.pageNum
								this.pageSize = result.data.data.pageSize
							})
					},
					prePage(){
						if(this.pageNum > 1){
							axios.get("/department/queryUser?query_way="+this.department+"&pageNum="+(this.pageNum-1)+"&pageSize="+this.pageSize)
							.then(result => {
								this.userList = result.data.data.list
								this.total = result.data.data.total
								this.pages = result.data.data.pages
								this.pageNum = result.data.data.pageNum
								this.pageSize = result.data.data.pageSize
							})
						}
					},
					nextPage(){
						if(this.pageNum < this.pages){
							axios.get("/department/queryUser?query_way="+this.department+"&pageNum="+(this.pageNum+1)+"&pageSize="+this.pageSize)
							.then(result => {
								this.userList = result.data.data.list
								this.total = result.data.data.total
								this.pages = result.data.data.pages
								this.pageNum = result.data.data.pageNum
								this.pageSize = result.data.data.pageSize
							})
						}
						
					},
					DeleteDepartmentStaff(id){
						if(confirm('确定要删除吗') == true) {
							axios.delete("/department/deleteUser?id=" + id)
								.then(result => {
									if(result.data.status == 200) {
										alert("删除成功")
										this.QueryDepartmentStaff()
									} else {
										alert("删除失败")
										this.QueryDepartmentStaff()
									}
								})
						} else {
							alert("删除失败")
						}
						this.QueryDepartmentStaff()
					}
				},
				mounted(){
					this.QueryDepartmentStaff()
				}
			})
		</script>
		
	</body>

</html>